<!DOCTYPE html>
<html>
<meta charset="uft-8">



<head>
	<title>兔窝保卫战</title>
	<style type="text/css">
	/*邓杰代码*/
	*{margin: 0;padding: 0;list-style-type:none; }
	.zhu{
		width: 100%;
	}
	.zhu-one{
		width: 1000px;
		height: 500px;
		margin:100px auto;
		background-image: url(森林保卫战/封面图.png);
		position: relative;
	}
	ul{
		list-style: none;
		display: flex;
	}
	.li1{
		width: 150px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        color: #fff;
        font-family: serif;
    font-weight: 900;
    border-radius: 20px;
    border: 1px solid #fff;
	}
	.yi{
		    font-size: 35px;
    position: absolute;
    left:100px;
    top: 285px;
	}
	.er{
font-size: 35px;
    position: absolute;
    left: 425px;
    top: 285px;
	}
	.san{
font-size: 35px;
    position: absolute;
    left: 730px;
    top: 285px;
	}
	
	#box1{
		width:0;
		border-right: 30px solid #6c6;
		border-top: 35px solid transparent;
		border-bottom: 35px solid transparent;
		float: left;
		position: absolute;
		right: 110px;
		bottom: 20px;
		cursor: pointer;
	}
    #box2{
    	width: 50px;
    	height: 70px;
    	background-color: #6c6;
    	float: left;
    	position: absolute;
		right: 60px;
		bottom: 20px;
		line-height: 70px;
        text-align: center;
        cursor: pointer;
    }
    #box3{
    	width:0;
    	border-left: 30px solid #6c6;
    	border-top: 35px solid transparent;
    	border-bottom: 35px solid transparent;
    	float: left;
    	position: absolute;
		right: 30px;
		bottom: 20px;
		cursor: pointer;
    }#box4{
		width:0;
		border-right: 30px solid #6c6;
		border-top: 35px solid transparent;
		border-bottom: 35px solid transparent;
		float: left;
		position: absolute;
		right: 220px;
		bottom: 20px;
		cursor: pointer;
	}
    #box5{
    	width: 50px;
    	height: 70px;
    	background-color: #6c6;
    	float: left;
    	position: absolute;
		right: 170px;
		bottom: 20px;
		line-height: 70px;
        text-align: center;
        cursor: pointer;
    }
    #box6{
    	width:0;
    	border-left: 30px solid #6c6;
    	border-top: 35px solid transparent;
    	border-bottom: 35px solid transparent;
    	float: left;
    	position: absolute;
		right: 140px;
		bottom: 20px;
		cursor: pointer;
    }
    embed{
    	visibility: hidden;
    width: 58px;
    height: 43px;
    position: absolute;
    right: 0px;
    bottom: 15px;
    }
    /*陈建春代码*/
    .relative{
            position: relative;
          
        }
        .absolute{
            position: absolute;
           
        }
        .top10{
            top: 10px;
        }
        .left10{
            left: 10px;
        }
        .top50{
            top: 50px;
        }
        .left50{
            left: 50px;
        }
        .display-none{
            display: none;
        }
        .h100{
            height: 100px;
        }
        .l120{
            left: 120px;
        }
        .process-background{
            width: 400px;
            height: 4px;
            background: #ccc;
        }
        .process-played{
            height: 4px;
            background: #ff9900;
            width: 0;
        }
        .circle{
            width: 15px;
            height: 15px;
            background: #ff9900;
            border-radius: 50%;
            top: -5px;
            box-shadow: 0 0 5px #aaa;
            left: 0;
        }
        .ml50{
            margin-left: 50px;
        }
        .mt20{
           
        }
       .au{
       	position: absolute;
    top: 568px;
    left: 300px;
       }
	</style>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	/*陈建春代码*/
var audio = document.querySelector('.au')
        var timer;
        var precent;
        function play () {
            audio.play()
            document.querySelector('.play').classList.add('display-none')
            document.querySelector('.pause').classList.remove('display-none')
            document.querySelector('.total').innerHTML = countTime(audio.duration)
            timer = setInterval(function(){
             
                document.querySelector('.current').innerHTML = countTime(audio.currentTime)
                document.querySelector('.circle').style.left = ((audio.currentTime / audio.duration) * 400) + 'px'
                document.querySelector('.process-played').style.width = ((audio.currentTime / audio.duration) * 400) + 'px'
            },1000)
        }
        function pause () {
            audio.pause()
            clearInterval(timer)
            document.querySelector('.play').classList.remove('display-none')
            document.querySelector('.pause').classList.add('display-none')

        }



         function countTime (time) {
            var minutes = Math.floor(time / 60)
            var seconds = Math.floor(time % 60) + 1
            if (seconds < 10) {
                seconds = '0' + seconds  
            }
            if (minutes < 10) {
                minutes = '0' + minutes  
            }
            return minutes + ':' + seconds
        }


        function start (e) {
            document.body.onmousemove = function(){
                e = window.event || e
                move(e)
            }
        }   


        function move (e) {
            var ml = e.clientX     
            var process_left = document.getElementsByClassName('process')[0].clientLeft + 50;
            if (ml < process_left) {
                document.querySelector('.circle').style.left = '0px'
                precent = 0;
               
            } else if (ml > (document.querySelector('.process-background').clientWidth) + 50) {
                document.querySelector('.circle').style.left = '400px'
                precent = 1;
            } else {
                
                document.querySelector('.circle').style.left = (ml - 50) + 'px'
                precent = (ml - 50) / 400
            }
            document.body.onmouseup=function() {
                end();
            }
        }
        function end () {
            document.body.onmousemove = null;
            
            audio.currentTime = precent * audio.duration
        }
  
        audio.onended = function () {
            console.log(1111)     
        }


	</script>
</head>
<body>
<!--邓杰代码-->
<div class="zhu">
	<div class="zhu-one">
	    <ul>
	    <a href="游戏玩法.html"><li class="li1 yi">游戏玩法</li></a>
	     <a href="游戏开始.html"><li class="li1 er">游戏开始</li></a>
	     <a href="游戏简介.html"><li class="li1 san">游戏简介</li></a>
	    </ul>
	    
	</div>
	<!--陈建春代码-->
	<audio class="au" src="yinyue.wav" controls></audio>
    <div class="relative">
        <div class="relative w100 h100">
            <img class="absolute play" width="50" onclick="play()" src="img/play.jpg" alt="">
            <img class="absolute display-none pause" width="50" onclick="pause()" src="img/stop.jpg" alt="">
        </div>
        
        <div class="process mt20 ml50">
            <div class="process-background relative">
                <div class="process-played"></div>
                <div onmousedown="start()" class="circle absolute"></div>
            </div>
        </div>
    </div>
	
</div>
</body>
</html>